<template>
	<view>
		<view class="">
			<u-tabs bold :current="tabsIndex" @click="tabClick" style="background-color: #FFFFFF00;" :list="tabsList"
				lineWidth="32" :lineColor="baseColor" :activeStyle="{
										color: baseColor,
										
										transform: 'scale(1)',
										fontWeight:'bold'
										
									}" :inactiveStyle="{
										color: '#797979',
										transform: 'scale(1)'
									}" itemStyle="  height: 44px;width:33.33%">
			</u-tabs>
		</view>
		<view v-if="tabsIndex==0" class="">
			<view class="title">
				店铺简介
			</view>
			<view class="line">
				
			</view>
			<view class="shopIntro">
				{{shop.shopIntro}}
			</view>
		</view>
		<view v-if="tabsIndex==1" class="">
			<view  @click="productClick(item)" v-for="(item,index) in productList" :key="index">
				<view v-if="index" class="line" >
				
				</view>
				<view class="product flex-row-space-between">
					<image class="productImage" :src="item.productPhoto" mode="aspectFill"></image>
					<view class="flex1">
						<view class="productName overflow1">
							{{item.productName}}
						</view>
						<view class="productNum">
							成交 {{item.productTurnover||'0'}}  |  服务评分 5.00
						</view>
						<view class="productPrice">
							￥{{item.productPrice}}
						</view>
						<view  class="line" style="margin: 14rpx 0;" >
						
						</view>
						<view class="flex-row-space-between">
							<view class="flex-row-flex-start">
								<image class="productHead" src="/static/my/head.png" mode=""></image>
								<view class="shopName">
									{{item.serviceName}}
								</view>
							</view>
							<view class="shopName">
								{{item.shopAddress}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="tabsIndex==2" class="">
			
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		t_productList,
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				productList:[],
				tabsIndex:0,
				baseColor:'#ED6F1A',
				tabsList: [{
						name: '商铺信息',
						status: []
					},
					{
						name: '服务出售',
						status:[1,2]
					},
				
					{
						name: '案例展示',
						status: [3]
					},
				
					
				],
				userinfo:{},
				shop:{},
				id:0,
				item:{}
			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#AED0FC"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
	
		},
		onLoad(e) {
			this.item=uni.getStorageSync('product')
			this.shop=uni.getStorageSync('shop')
			this.userinfo=uni.getStorageSync('userinfo')
			
			// this.id=e.id
			this.t_productList()
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		methods: {
			tabClick(e){
				this.tabsIndex=e.index

			},
			buttonClick(){
				this.t_order()
			},
			t_productList () {
				var data={
					shopId:this.item.shopId,
				
				}
				t_productList(data).then(res => {
					this.productList = res.rows
				})
			},
			
		
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.title{
	margin: 31rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #808080;
}
.shopIntro{
	margin: 38rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #666666;
}
.product{
		padding: 20rpx;
	}
	.productImage{
		width: 232rpx;
		height: 232rpx;
		border-radius: 8rpx;
		margin-right: 30rpx;
		background-color: #F6F6F6;
	}
	.productName{
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}
	.productNum{
		margin-top: 14rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #A4A4A4;
	}
	.productPrice{
		margin-top: 14rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #ED6F1A;
	}
	.productHead{
		width: 42rpx;
		height: 42rpx;
		border-radius: 21rpx;
	}
	.shopName{
		margin-left: 6rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
	}
</style>